import React, { useEffect, useRef, useState } from "react";
import style from "./style.module.scss";
import myIconCamera from "../../../../assets/images/icon/hdpi/my_icon_camera_n.png";
import { MyMack } from "../../../../components/myMack";
import { Swiper, Toast } from "react-vant";
import { getSystemImagePic, postChooseImagePic, postImagePic } from "../../../../api/my";
import accordingToTheImage from '../../../../assets/images/image/hdpi/according_to_the_image.png'
import { useNavigate } from "react-router-dom";
import { useAppSelector } from "../../../../store/hooks";
import { start } from "repl";


// 系统图片数据类型
interface systemImagePicRawStata {
  imagePic: string
}

const Index: React.FC = () => {

  const navigate = useNavigate()

  const doctorId = useAppSelector((start) => start.user.doctor.doctorId)
  const sessionId = useAppSelector((start) => start.user.doctor.sessionId)

  // 组件mymack的开关
  const [isFlag, setIsFlag] = useState<boolean>(false);
  // swiper-item 当前下标
  const [active, setActive] = useState<number>(0)
  // swiper-item 当前图片路径
  const [initImagePic, setInitImagePic] = useState('')
  // 初始化数据
  const [initSystemImagePic, setInitSystemImagePic] = useState<systemImagePicRawStata[]>([])

  // swiper的onchang事件
  const changToggle = (i: number) => {
    setActive(i)
    initSystemImagePic.length && setInitImagePic(initSystemImagePic[i].imagePic)
  }

  // 选择系统形象
  const chooseImagePic = async () => {
    const resp = await postChooseImagePic(initImagePic)
    const { message, status } = resp
    if (status === '0000') {
      Toast.success(message)
      navigate('/my')
    }
  }
  // 自定义系统形象
  const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const tar = e.target as HTMLInputElement;
    if (tar.files) {
      const file = tar.files[0];
      const resp = await postImagePic(file, doctorId, sessionId);
      const { message, status } = resp
      console.log(resp);

      if (status === '0000') {
        Toast.success(message)
        navigate('/my')
      }
    }
  };

  useEffect(() => {
    getSystemImagePic().then(resp => {
      setInitSystemImagePic([...resp.result, { imagePic: '' }])
      setInitImagePic(resp.result[0].imagePic)
    })
  }, [])

  return (
    <div>
      <div className={style.changeImage}>
        <div className={style.changeText}>为您设置一张证件照吧</div>
        <div className={style.demo_swiper}>
          {/* 中间轮播图 */}
          <Swiper
            slideSize={82}
            trackOffset={10}
            loop={false}
            className={style.swiper_box}
            indicator={false}
            onChange={(i) => changToggle(i)}
          >
            {
              initSystemImagePic.length > 0 ? initSystemImagePic.map((item, index) => {
                return (
                  <Swiper.Item key={index} className={active === index ? style.swiper_active : style.swiper_item}>
                    {
                      item.imagePic ? (
                        // 系统推荐照
                        <div className={style.items}>
                          <img src={item.imagePic} alt="" />
                        </div>
                      ) : (
                        // 上传形象照
                        <div className={style.container}>
                          <img src={myIconCamera} alt="" onClick={() => setIsFlag(true)} className={style.img} />
                          <div>自定义形象照</div>
                          <div className={style.atext}>让你的形象独一无二</div>
                          <div className={style.image}>
                            <img src={accordingToTheImage} alt="" />
                          </div>
                        </div>
                      )
                    }
                  </Swiper.Item>
                )
              }) : (
                <Swiper.Item></Swiper.Item>
              )
            }
          </Swiper>
        </div>
        {/* 确认形象照 */}
        <button onClick={() => {
          initImagePic ? chooseImagePic() : setIsFlag(true)
        }}>完成设置</button>
      </div>
      {/* 上传形象照的蒙层 */}
      {
        isFlag && (
          <MyMack
            type="select"
            onCancel={() => setIsFlag(false)}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChange(e)}
          ></MyMack>
        )
      }
    </div >
  );
};

export default Index;
